<template>
    <rx-fit class="x-form-solution-box">
        <template #head>
            <div :style="[(canDesignForm || buttons.length>0)?'padding:6px 10px;text-align: right;':'text-align: right;']">
                <span v-if="canDesignForm" class="rx-design-form" @click="designForm">
                    <rx-icon-show size="15px" style="margin-right:2px" icon="icon-linechuangjian2"/>{{i18n("list.designForm","设计表单")}}</span>
                <a-button-group>
                    <template v-for="btn in buttons">
                        <a-button
                            :type="btn.style"
                            :ref="btn.value"
                            @click.stop="handMethod(btn,buttons)"
                            :loading="btn.loading"
                        >
                            {{ getI18Name(btn) }}
                        </a-button>
                    </template>
                </a-button-group>
            </div>
        </template>
        <template #middle>
            <template v-if="!readonly || !flowInstId || !showApprovalDetails">
                <div class="previewBox">
                    <x-form-build
                        v-if="formConfig" ref="formBuild" :form-data="formData"
                        :form-config="formConfig" :global-config="globalConfig"
                        :form-js="formJs" :readOnly="readonly" :alias="formAlias"
                        :contextData="contextData" :name="formSolution.name"
                        :permission="permission" @dataChange="dataChange"
                        :id-field="idField" :dialogBox="dialogBox"
                        :ctl-read-only="ctlReadOnly"
                    ></x-form-build>
                </div>
            </template>
            <template v-else>
                <a-tabs default-active-key="details" class="rx-a-tabs" @change="changeTabs">
                    <a-tab-pane key="details" :tab="i18n('tabs.details','详情')">
                        <div class="previewBox">
                            <x-form-build
                                v-if="formConfig" ref="formBuild" :form-data="formData"
                                :form-config="formConfig" :global-config="globalConfig"
                                :permission="permission" :name="formSolution.name"
                                :contextData="contextData" @dataChange="dataChange"
                                :form-js="formJs" :readOnly="readonly" :alias="formAlias"
                                :id-field="idField" :dialogBox="dialogBox"
                                :ctl-read-only="ctlReadOnly"
                            ></x-form-build>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="flowChart" :tab="i18n('tabs.flowImage','流程图')">
                        <bpm-image-view
                            v-if="isShowImage"
                            :instId="flowInstId"
                            :preview="false"
                            :formData="formData"
                        />
                    </a-tab-pane>
                    <a-tab-pane key="history" :tab="i18n('tabs.history','审批历史')">
                        <rx-approval-history :instId="flowInstId"/>
                    </a-tab-pane>
                </a-tabs>
            </template>
        </template>
    </rx-fit>
</template>

<script>
/**
 * 表单方案渲染页面
 */
import FormSolutionFunc from "./FormSolutionFunc.js";
import ButtonFunc from "./ButtonFunc.js";
import FlowUtil from "@/views/modules/bpm/js/FlowUtil.js";
import {RxFit} from '@lowcode/jpaas-base-lib';
import {RxApprovalHistory, BpmImageView} from '@lowcode/jpaas-share-component';
import DialogBox from "@/assets/js/dialogBox";

export default {
    name: "FormSolutionShow",
    inject:['appId'],
    mixins: [FormSolutionFunc, ButtonFunc, FlowUtil],
    components: {
        RxFit,
        RxApprovalHistory,
        BpmImageView
    },
    props: {
        layerid:{},
        /**
         * 表单方案别名
         */
        alias: {
            type: String
        },
        /**
         * 表单方案主键。
         */
        pkId: {},
        /**
         * 不使用主键打开表单数据。
         * {
         *     param1:"",
         *     param2:""
         * }
         */
        params: {
            type: Object
        },
        /**
         * 父字段值
         * {
         *   field:"",
         *   value:""
         * }
         */
        parent: {
            type: Object
        },
        /**
         * 这个是从DialogView打开时需要用到的。
         * 数据格式:{formAlias:"",pkId:"",readOnly:false}
         */
        menuParams: {
            type: String
        },
        /**
         * 是否只读。
         */
        readOnly: {
            default: false
        },
        /**
         * 初始化数据。
         * 参数为 data ,表示为表单数据。
         * 此方法返回json对象数据。
         */
        setInitData: {
            type: Function
        },
        /**
         * 在保存时关闭窗口默认为false。
         */
        closeOnSave: {
            type: Boolean,
            default: false
        },
        ctlReadOnly:{},
        appId:{
            type: String
        },
        backfillParams:{
            type:Object
        },
        showApprovalDetails:{
            type: Boolean,
            default: true//是否展示流程图和审批历史
        }
    },
    data() {
        return {
            dialogBox: DialogBox,
        }
    },
    created() {
        //初始化参数
        this.initParams();
        this.init();
    },
    methods: {},
    watch: {
        pkId: function (val) {
            this.formPkId=val;
            this.init();
        }
    },
}
</script>

<style scoped>
.rx-a-tabs ::v-deep(.ant-tabs-nav) {
    margin-bottom: 0;
}

.rx-a-tabs ::v-deep(.ant-tabs-nav-list) {
    margin-left: 10px;
}
.x-form-solution-box ::v-deep(.rx-fit-content){
    overflow: hidden;
}
.x-form-solution-box ::v-deep(.rx-fit-head){
    border-bottom: 0;
}
.previewBox{
    height: 100%;
    background-color: #f4f4f4;
    border-top: 1px solid #f4f4f4;
}
.rx-design-form{
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 4px;
    align-items: center;
    background-color: #F3F3F3;
    cursor: pointer;
    margin-right: 10px;
}

</style>
